<template>

  <div>

    <v-tabs
      v-model="active"
      color="primary"
      dark
      slider-color="accent"
      @input="switchTab"
    >

      <v-tab
        ripple
      >
        {{ $t('discussion.questionSquare') }}
      </v-tab>
      <v-tab
        ripple
      >
        {{ $t('discussion.myQuestions') }}
      </v-tab>
      <v-tab
        ripple
      >
        {{ $t('discussion.rank') }}
      </v-tab>

      <v-spacer></v-spacer>
      <v-menu offset-y v-if="$vuetify.breakpoint.mdAndUp && filteringButtonVisible">
        <v-btn color="accent" dark slot="activator">{{ $t('discussion.filterQuestions') }}</v-btn>
        <v-list>
          <v-list-tile v-for="item in options" :key="item.title" @click="">
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>

      <v-tab-item
        @click="questionDetailDialog = true"
      >

        <v-list two-line>
          <template v-for="(item, index) in questions">
            <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
            <v-divider v-else-if="item.divider" :inset="item.inset" :key="index"></v-divider>
            <v-list-tile v-else :key="item.title" @click="">
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>
                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-list-tile-action-text>{{ item.action }}</v-list-tile-action-text>
              </v-list-tile-action>

            </v-list-tile>
          </template>
        </v-list>

      </v-tab-item>

      <v-tab-item
        @click="questionDetailDialog = true"
      >
        <v-list two-line>
          <template v-for="(item, index) in selfQuestions">
            <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
            <v-divider v-else-if="item.divider" :inset="item.inset" :key="index"></v-divider>
            <v-list-tile v-else :key="item.title" @click="">
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>
                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
              </v-list-tile-content>

            </v-list-tile>
          </template>
        </v-list>

      </v-tab-item>

      <v-tab-item
      >

        <v-list two-line>
          <template v-for="(item, index) in ranks">
            <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
            <v-divider v-else-if="item.divider" :inset="item.inset" :key="index"></v-divider>
            <v-list-tile avatar v-else :key="item.title" @click="">
              <v-list-tile-avatar>
                <img :src="item.avatar">
              </v-list-tile-avatar>

              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"></v-list-tile-title>
                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-list-tile-action-text>{{ item.action }}</v-list-tile-action-text>
              </v-list-tile-action>

            </v-list-tile>
          </template>
        </v-list>

      </v-tab-item>

    </v-tabs>

    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          {{ $t('discussion.newQuestion.dialogTitle') }}
        </v-card-title>
        <v-card-text>
          <v-container fluid>
            <v-layout row>
              <v-text-field
                name="input-1"
                :label="$t('discussion.newQuestion.titleInputLabel')"
                :hint="$t('discussion.newQuestion.titleInputHint')"
                id="title"
                v-model="newQuestionTitle"
              ></v-text-field>
            </v-layout>
            <v-layout row>
              <v-text-field
                name="input-2"
                :label="$t('discussion.newQuestion.descriptionInputLabel')"
                :hint="$t('discussion.newQuestion.descriptionInputHint')"
                id="content"
                v-model="newQuestionDescription"
              ></v-text-field>
            </v-layout>
            <v-layout row>
              <dynamic-tags-input
                :chips.sync="newQuestionTags"
                :label="$t('discussion.newQuestion.tagInputLabel')"
                :hint="$t('discussion.newQuestion.tagInputHint')"
              ></dynamic-tags-input>
            </v-layout>
          </v-container>

        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" flat @click.stop="submitNewQuestion">{{ $t('discussion.newQuestion.submit') }}</v-btn>
          <v-btn color="secondary" flat @click.stop="dialog=false">{{ $t('cancel') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-btn
      color="pink"
      dark
      fixed
      bottom
      right
      fab
      @click.stop="dialog = true"
    >
      <v-icon>add</v-icon>
    </v-btn>
    <v-dialog
      v-model="questionDetailDialog"
      fullscreen
      transition="dialog-bottom-transition"
      :overlay="false"
      scrollable
    >

      <v-card tile>
        <v-toolbar card dark color="primary">
          <v-btn icon @click.native="questionDetailDialog = false" dark>
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-title>问题详情</v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <question-detail></question-detail>
        </v-card-text>

        <div style="flex: 1 1 auto;"></div>
      </v-card>

    </v-dialog>
  </div>

</template>

<script>
  import avatar0 from '../../../static/avatars/avatar-0.png'
  import avatar1 from '../../../static/avatars/avatar-1.png'
  import avatar2 from '../../../static/avatars/avatar-2.png'
  import avatar3 from '../../../static/avatars/avatar-3.png'
  import avatar4 from '../../../static/avatars/avatar-4.png'
  import avatar5 from '../../../static/avatars/avatar-5.png'
  import avatar6 from '../../../static/avatars/avatar-6.png'
  import avatar7 from '../../../static/avatars/avatar-7.png'
  import avatar8 from '../../../static/avatars/avatar-8.png'
  import avatar9 from '../../../static/avatars/avatar-9.png'

  import DynamicTagsInput from '@/components/DynamicTagsInput'
  import QuestionDetail from './question-detail'

  export default {
    components: {
      DynamicTagsInput, QuestionDetail
    },
    data() {
      return {
        dialog: false,
        questionDetailDialog: false,
        filteringButtonVisible: true,
        active: null,
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        questions: [
          // { header: 'Today' },
          { title: '什么是图灵机的停机问题？', subtitle: "<span class='text--primary'>林启龙</span> &mdash; 计算机科学与技术导论", action: '2 回答 | 4 天前' },
          { divider: true, inset: false },
          { title: '以下这段代码为什么运行不了', subtitle: "<span class='text--primary'>李元祥</span> &mdash; 面向对象程序设计 Java", action: '0 回答 | 5 天前' },
          { divider: true, inset: false },
          { title: '高数上第二章第10题的答案有错', subtitle: "<span class='text--primary'>王子彦</span> &mdash; 高等数学", action: '0 回答 | 7 天前' },
          { divider: true, inset: false },
          { title: '潘永瑜老师的办公室在哪里', subtitle: "<span class='text--primary'>郑志成</span> &mdash; 其他", action: '0 回答 | 2 周前' }
        ],
        selfQuestions: [
          { title: '什么是图灵机的停机问题？', subtitle: "<span class='text--primary'>林启龙</span> &mdash; 计算机科学与技术导论", action: '2 回答 | 4 天前' }
        ],
        options: [
          { title: '计算机科学与技术导论' },
          { title: '编译原理' },
          { title: '面向对象程序设计' },
          { title: 'Java' },
          { title: '高等数学' },
          { title: '线性代数' }
        ],
        ranks: [
          { header: '我的能力值是 1102 ，超过了 99% 的同学！' },
          { title: '林启龙', subtitle: '1102', avatar: avatar0 },
          { title: '郑志成', subtitle: '721', avatar: avatar1 },
          { title: '王子彦', subtitle: '633', avatar: avatar2 },
          { title: '黄雁捷', subtitle: '601', avatar: avatar3 },
          { title: '陈悦', subtitle: '422', avatar: avatar4 },
          { title: '李国芹', subtitle: '302', avatar: avatar5 },
          { title: '张婉玲', subtitle: '298', avatar: avatar6 },
          { title: '高增', subtitle: '256', avatar: avatar7 },
          { title: '黄毅', subtitle: '201', avatar: avatar8 },
          { title: '陈松伶', subtitle: '84', avatar: avatar9 }
        ],
        newQuestionTitle: '',
        newQuestionDescription: '',
        newQuestionTags: []
      }
    },
    methods: {
      next() {
        const active = parseInt(this.active)
        this.active = (active < 2 ? active + 1 : 0).toString()
      },
      switchTab(index) {
        this.filteringButtonVisible = index === '0' || index === '1'
        console.log(this.filteringButtonVisible)
      },
      submitNewQuestion() {
        this.dialog = false
        setTimeout(() => {
          this.questions.push(
            { divider: true, inset: false },
            { title: this.newQuestionTitle, subtitle: `<span class='text--primary'> ${this.newQuestionDescription} </span> &mdash; ${this.newQuestionTags.toString().split(',').join(' ')} `, action: '0 回答 | 1 分钟前' }
          )
          this.newQuestionTitle = ''
          this.newQuestionDescription = ''
          this.newQuestionTags.clear()
        }, 500)
      }
    }
  }
</script>

<style scoped>

</style>
